<template>
  <div>
    <h2>学习计划表</h2>
    <div>
      <input v-model="newSubject" placeholder="请输入学习科目" />
      <input v-model="newContent" placeholder="请输入学习内容" />
      <select v-model="newLocation">
        <option value="自习室">自习室</option>
        <option value="图书馆">图书馆</option>
        <!-- 可以添加更多选项 -->
      </select>
      <button @click="addPlan">添加</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>学习科目</th>
          <th>学习内容</th>
          <th>学习地点</th>
          <th>完成状态</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(plan, index) in studyPlans" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ plan.subject }}</td>
          <td>{{ plan.content }}</td>
          <td>{{ plan.location }}</td>
          <td>
            <input type="checkbox" v-model="plan.completed" />
          </td>
          <td>
            <button @click="removePlan(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newSubject: '',
      newContent: '',
      newLocation: '自习室',
      studyPlans: [
        { subject: 'Vue.js前端实战开发', content: '学习指令，例如v-if、v-for、v-model等', location: '自习室', completed: false },
        { subject: 'JavaScript', content: '运算符', location: '图书馆', completed: true },
      ]
    };
  },
  methods: {
    addPlan() {
      if (this.newSubject && this.newContent) {
        this.studyPlans.push({
          subject: this.newSubject,
          content: this.newContent,
          location: this.newLocation,
          completed: false
        });
        this.newSubject = '';
        this.newContent = '';
      }
    },
    removePlan(index) {
      this.studyPlans.splice(index, 1);
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #497e71;
}

button {
  margin-right: 5px;
}
</style>